<template>
  <div class="order-content">
    <div class="title">
      <h3>我的订单</h3>
    </div>
    <div class="chosetype">
      <table>
        <thead>
          <tr>
            <th width="29%">商品</th>
            <th width="31%">订单详情</th>
            <th width="13%">收货人</th>
            <th>金额</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
        </thead>
      </table>
    </div>
    <div class="orders">
      <table class="order-item" v-for="table in records" :key="table.id">
        <thead>
          <tr>
            <th colspan="5">
              <span class="ordertitle"
                >{{ table.createTime }}　订单编号：{{ table.outTradeNo }} <span class="pull-right delete"><img src="./images/delete.png" /></span
              ></span>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(good, index) in table.orderDetailList" :key="good.id">
            <td width="60%">
              <div class="typographic">
                <img :src="good.imgUrl" style="width: 100px; height: 100px" />
                <a class="block-text">{{ good.skuName }}</a>
                <span>x{{ good.skuNum }}</span>
                <a class="service">售后申请</a>
              </div>
            </td>
            <td :rowspan="table.orderDetailList.length" width="8%" v-show="index == 0" class="center">小丽</td>
            <td :rowspan="table.orderDetailList.length" width="13%" v-show="index == 0" class="center">
              <ul class="unstyled">
                <li>总金额¥{{ good.splitTotalAmount }}</li>
                <li>在线支付</li>
              </ul>
            </td>
            <td :rowspan="table.orderDetailList.length" width="8%" v-show="index == 0" class="center">
              <a href="#" class="btn">{{ table.orderStatusName }} </a>
            </td>
            <td :rowspan="table.orderDetailList.length" width="13%" v-show="index == 0" class="center">
              <ul class="unstyled">
                <li>
                  <a href="mycomment.html" target="_blank">评价|晒单</a>
                </li>
              </ul>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="choose-order">
      <pagination :total="total" :pageSize="limit" :pageNo="page" :pager="5" @changeLeft="changeLeft" @changeRight="changeRight" @changePageNo="changePageNo"></pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "Myorder",
  data() {
    return {
      page: 1,
      limit: 4,
      records: [],
      total: 0,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      let res = await this.$ajax.reqOrder(this.page, this.limit);
      if (res.code == 200) {
        this.records = res.data.records;
        this.total = res.data.total;
      } else {
        alert("出错了");
      }
    },
    changePageNo(page) {
      this.page = page;
      this.getData();
    },
    changeLeft() {
      if (this.page > 1) {
        this.page--;
        this.getData();
      }
    },
    changeRight() {
      if (this.page < this.total) {
        this.page++;
        this.getData();
      }
    },
  },
};
</script>

<style lang="less" scoped></style>
